{% extends 'base.html' %}

{% block page-content %}

    <div class="container">
        <div class="pay" style="margin-top: 10px">
            <!--主内容开始编辑-->
            <div class="tr_recharge">
                <div class="tr_rechtext">
                    <p class="te_retit"><img src="/static/images/coin.png" alt=""/>充值中心</p>
                </div>
                <form action="" class="am-form" id="doc-vld-msg">
                    <div class="tr_rechbox">
                        <div class="tr_rechhead">
                            <img src="/static/images/ys_head2.jpg"/>
                            <p>充值帐号：
                                <a>{{ request.user.username }}</a>
                            </p>
                            <div class="tr_rechheadcion">
                                <img src="/static/images/coin.png" alt=""/>
                                <span>当前会员有效期：<span>{{ request.user.plusEndDate }}</span></span>
                            </div>
                        </div>
                        <div class="tr_rechli am-form-group">
                            <ul class="ui-choose am-form-group" id="uc_01">
                                <li>
                                    <label class="am-radio-inline" :style="SelectStyle(0)" @click="SelectMoney(0)">
                                        月卡
                                    </label>
                                </li>
                                <li>
                                    <label class="am-radio-inline" :style="SelectStyle(1)" @click="SelectMoney(1)">
                                        年卡
                                    </label>
                                </li>

                                <li>
                                    <label class="am-radio-inline" :style="SelectStyle(2)" @click="SelectMoney(2)">
                                        3年卡
                                    </label>
                                </li>
                                <li>
                                    <label class="am-radio-inline" :style="SelectStyle(3)" @click="SelectMoney(3)">
                                        5年卡
                                    </label>
                                </li>
                            </ul>
                        </div>
                        <div class="tr_rechcho am-form-group">
                            <span>充值方式：</span>
                            <label class="am-radio" style="margin-left:0px;">
                                <img src="/static/images/zfbpay.png"/>
                            </label>
                        </div>
                        <div class="tr_rechnum">
                            <span>应付金额：</span>
                            <p class="rechnum">[[currentMoney]]元</p>
                        </div>
                    </div>
                    <div class="tr_paybox">
                        <input type="button" value="确认支付"  class="tr_pay am-btn" @click="PayMoney()"/>
                        <span>温馨提示：遇到问题请拨打联系电话 17371571590。</span>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}


{% block page-scripts %}
    <script type="text/javascript" src="/static/js/amazeui.min.js"></script>
    <script type="text/javascript" src="/static/js/ui-choose.js"></script>
    <script>
        var vm = new Vue({
            el: '#app',
            delimiters: ['[[', ']]'],
            data: {
                dataList: [],
                searchName: "",
                errormessage: "",
                currentIndex: 0,
                currentMoney: 50

            },
            created() {

            },
            methods: {
                //提交数据
                async PayMoney() {
                  let data = {money: this.currentMoney,type:this.currentIndex};
                    let res = await axiospost("{% url 'pay_money' %}", data);
                    console.log(res);
                    if (res.code == 200) {
                         window.location.href = res.data.pay_url;
                    }
                },
                SelectMoney(index) {
                    console.log(index);
                    this.currentIndex = index;
                    if(index==0)
                    {
                         this.currentMoney=50;
                    }
                    else if(index==1)
                    {
                         this.currentMoney=200;
                    }
                    else if(index==2)
                    {
                         this.currentMoney=400;
                    }
                    else if(index==3)
                    {
                         this.currentMoney=500;
                    }

                },

            },
            computed: {
                SelectStyle() {
                return function(index){
                   if (index == this.currentIndex) {
                        return "z-index: 4;border-color: #27b0d6;  color: #27b0d6;";

                    } else {
                        return "";
                    }
                }
            }

            }
        })
    </script>

{% endblock %}

{% block page-styles %}
    <style>
        form {
            font-size: 12pt;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/static/css/amazeui.min.css"/>
    <link rel="stylesheet" type="text/css" href="/static/css/paymoney.css"/>
{% endblock %}